<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Home</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
          integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <!-- Google fonts - Popppins for copy-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,800">
    <!-- orion icons-->
    <link rel="stylesheet" href="css/orionicons.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="img/favicon.png?3">
    <link href="https://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>


<div class="d-flex align-items-stretch">

    <div id="sidebar" class="sidebar py-3">
        <div class="text-gray-400 text-uppercase px-3 px-lg-4 py-4 font-weight-bold small headings-font-family">MAIN
        </div>
        <ul class="sidebar-menu list-unstyled">
            <li class="sidebar-list-item"><a href="index.html" class="sidebar-link text-muted active"><i
                    class="o-home-1 mr-3 text-gray"></i><span>用户管理</span></a></li>
            <li class="sidebar-list-item"><a href="#" class="sidebar-link text-muted"><i
                    class="o-sales-up-1 mr-3 text-gray"></i><span>部门管理</span></a></li>
            <li class="sidebar-list-item"><a href="#" class="sidebar-link text-muted"><i
                    class="o-table-content-1 mr-3 text-gray"></i><span>设备管理</span></a></li>
            <li class="sidebar-list-item"><a href="#" class="sidebar-link text-muted"><i
                    class="o-survey-1 mr-3 text-gray"></i><span>文档管理</span></a></li>
            <li class="sidebar-list-item"><a href="#" class="sidebar-link text-muted"><i
                    class="o-wireframe-1 mr-3 text-gray"></i><span>系统设置</span></a>
            </li>

        </ul>

    </div>

    <!-- hhh -->
    <!-- 树状菜单部分 -->
    <div class="col-lg-3 mb-5">
        <div class="">
            <div id="treeview4"></div>
        </div>
    </div>
    <!-- 树状菜单部分 end -->


    <!--  表单内容 开始 -->
    <div class="col-lg-6 mb-5">
        <div class="card">
            <div class="card-body">
                <form class="form-inline" action="">
                    <div class="form-group">
                        <label for="inlineFormInput" class="sr-only">姓名</label>
                        <input id="inlineFormInput" type="text" placeholder="姓名" class="mr-3 form-control">
                    </div>
                    <div class="form-group">

                        <label for="inlineFormInputGroup" class="sr-only">公司</label>
                        <input id="inlineFormInputGroup" type="text" placeholder="公司名称" class="mr-3 form-control">


                    </div>
                    <div class="form-group">
                        <button id="submit" type="button" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
            <div class="card-body">
                <table id="emptable" class="table table-striped table-sm card-text">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Ename</th>
                        <th>Job</th>
                        <th>HireDate</th>
                        <th>DeptName</th>
                    </tr>
                    </thead>
                    <!--//待完成-->
                    <tbody>
                    <!-- <tr>
                       <th scope="row">1</th>
                       <td>SCOTT</td>
                       <td>ANALYST</td>
                       <td>1987-04-19</td>
                       <td>开发部</td>
                     </tr>
                     <tr>
                         <th scope="row">1</th>
                         <td>ALLEN</td>
                         <td>SALESMAN</td>
                         <td>1981-02-20</td>
                         <td>产品部</td>
                       </tr>
                       <tr>
                           <th scope="row">1</th>
                           <td>JONES</td>
                           <td>MANAGER</td>
                           <td>1981-04-02</td>
                           <td>研发部</td>
                         </tr>
                         <tr>
                             <th scope="row">1</th>
                             <td>MILLER</td>
                             <td>CLERK</td>
                             <td>2018-07-31</td>
                             <td>产品部</td>
                           </tr>-->
                   </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- 表单内容 end -->

</div>

<!-- JavaScript files-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper.js/umd/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/jquery.cookie/jquery.cookie.js"></script>
<script src="js/js.cookie.min.js"></script>
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/bootstrap-treeview.js"></script>

<script type="text/javascript">
    $(function () {

        $('#submit').click(function () {


            var userName = $('#inlineFormInput').val();
            var companyName = $('#inlineFormInputGroup').val();

            console.log('userName:' + userName + ',companyName:' + companyName);

            //ajax请求获取用户信息
            $.ajax({
                url: "/findUserInfo",
                type: "post",
                dataType: 'json',
                //拼接json字符
                data: {'userName': userName, 'companyName': companyName},
                success: function (data) {
                    //更新表格数据，使用Jquery拼接
                    //获取 到后台传递过来的数据
                    var emps = data.emps;
                    console.log(emps)
                    var tbody = "";

                    //循环每一条记录
                    $.each(emps,function (index, emp) {
                        tbody += "<tr>";
                        tbody += "<th>" + emp.empno + "</th>";
                        tbody += "<th>" + emp.ename + "</th>";
                        tbody += "<th>" + emp.job + "</th>";
                        tbody += "<th>" + emp.hiredate + "</th>";
                        tbody += "<th>" + emp.deptName + "</th>";
                        tbody += "</tr>";
                    });
                    /*each (var i = 0; i < emps.length; i++) {
                        tbody += "<tr>";
                        tbody += "<th>" + emps[i].empno + "</th>";
                        tbody += "<th>" + emps[i].ename + "</th>";
                        tbody += "<th>" + emps[i].job + "</th>";
                        tbody += "<th>" + emps[i].hiredate + "</th>";
                        tbody += "<th>" + emps[i].deptName + "</th>";
                        tbody += "</tr>";
                    }*/
                    $("#emptable").append(tbody);
                },
                error:
                    function (data) {
                        alert("请求错误");
                        console.log(data);
                    }
            });


            var defaultData = [{
                text: '深圳总公司',
                pid: 1,
                id: 1,
                nodes: [{
                    text: '开发部',
                    pid: 1,
                    id: 2,
                    nodes: []

                },
                    {
                        text: '研发部',
                        pid: 1,
                        id: 3,
                        nodes: []

                    },
                    {
                        text: '产品部',
                        pid: 1,
                        id: 6,
                        nodes: []
                    }
                ]
            },

                {
                    text: '长沙分公司',
                    pid: 4,
                    id: 4,
                    nodes: [{
                        text: '开发部',
                        pid: 4,
                        id: 5,
                        nodes: []

                    },
                        {
                            text: '实施部',
                            pid: 4,
                            id: 7,
                            nodes: [],

                        }
                    ]
                },

                {
                    text: '武汉分公司',
                    pid: 8,
                    id: 8,
                    nodes: []
                }

            ];


            $('#treeview4').treeview({
                color: "#428bca",
                data: defaultData,
                levels: 2, //设置继承树默认展开的级别
                onNodeSelected: function (event, data) {
                    // 选中时的事件
                    console.log(data);

                }

            });

        })
    })
</script>
<style>
    .list-group-item {
        display: inline-flex !important;
    }
</style>
</body>

</html>
